<template>
  <van-sticky>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-sticky>

  <div class="box">
    <div class="left">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="item in FenleiList"
          :key="item.cat_id"
          :title="item.cat_name"
        />
      </van-sidebar>
    </div>
    <div class="right">
      <van-tabs v-model:active="active1">
        <van-tab title="标签 1"></van-tab>
        <van-tab title="标签 2"></van-tab>
        <van-tab title="标签 3"></van-tab>
        <van-tab title="标签 4"></van-tab>
      </van-tabs>
      <van-grid
        :column-num="3"
        v-for="item in FenleiList[active]?.children"
        :key="item.cat_id"
      >
        <van-grid-item
          v-for="value in item.children"
          :key="value.cat_id"
          :icon="value.cat_icon"
          :text="value.cat_name"
          @click="goods(value.cat_id)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script setup>

import { ref } from "vue";
const active = ref(0);
const active1 = ref(0);
import { Fenlei } from "../../store";
import { storeToRefs } from "pinia";
const { FENLEI } = Fenlei();
const { FenleiList } = storeToRefs(Fenlei());
console.log(FenleiList);
FENLEI();
import { useRoute, useRouter } from "vue-router";
import axios from "../../request";
const router = useRouter();
const route = useRoute();
const goods = (cid) => {
  router.push({
    path: "/goods",
    query: {
      cid,
    },
  });
};
const onClickLeft = () => router.go(-1);
</script>

<style lang="scss" scoped>
.box {
  display: flex;
}
.left {
  width: 100px;
}
.right {
  flex: 1;
}
</style>